import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from '../store';
import { View, Text, StyleSheet, StatusBar } from 'react-native';

// 导入屏幕组件
import HomeScreen from '../screens/Home';
import SettingsScreen from '../screens/Settings';
import StatisticsScreen from '../screens/Statistics';

// 导入悬浮按钮
import FloatingButton from '../components/FloatingButton';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

// Tab图标组件
const TabIcon = ({ name, focused, color, size }) => {
  const icons = {
    Home: focused ? '🏠' : '🏡',
    Settings: focused ? '⚙️' : '🔧',
    Statistics: focused ? '📊' : '📈',
  };
  
  return (
    <Text style={{ fontSize: size, color }}>
      {icons[name] || '📱'}
    </Text>
  );
};

// 底部Tab导航
const TabNavigator = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => (
          <TabIcon 
            name={route.name} 
            focused={focused} 
            color={color} 
            size={size} 
          />
        ),
        tabBarActiveTintColor: '#4CAF50',
        tabBarInactiveTintColor: '#999999',
        tabBarStyle: {
          backgroundColor: '#FFFFFF',
          borderTopWidth: 1,
          borderTopColor: '#E0E0E0',
          height: 60,
          paddingBottom: 8,
          paddingTop: 8,
        },
        tabBarLabelStyle: {
          fontSize: 12,
          fontWeight: '500',
        },
        headerShown: false,
      })}
    >
      <Tab.Screen 
        name="Home" 
        component={HomeScreen}
        options={{
          title: '首页',
        }}
      />
      <Tab.Screen 
        name="Statistics" 
        component={StatisticsScreen}
        options={{
          title: '统计',
        }}
      />
      <Tab.Screen 
        name="Settings" 
        component={SettingsScreen}
        options={{
          title: '设置',
        }}
      />
    </Tab.Navigator>
  );
};

// 主应用导航
const AppNavigator = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <NavigationContainer>
          <StatusBar 
            barStyle="light-content" 
            backgroundColor="#4CAF50" 
          />
          <Stack.Navigator
            screenOptions={{
              headerStyle: {
                backgroundColor: '#4CAF50',
                elevation: 0,
                shadowOpacity: 0,
              },
              headerTintColor: '#FFFFFF',
              headerTitleStyle: {
                fontWeight: 'bold',
                fontSize: 18,
              },
              headerTitleAlign: 'center',
            }}
          >
            <Stack.Screen 
              name="Main" 
              component={TabNavigator}
              options={{ headerShown: false }}
            />
          </Stack.Navigator>
          
          {/* 悬浮按钮 - 在所有屏幕上都显示 */}
          <FloatingButton />
        </NavigationContainer>
      </PersistGate>
    </Provider>
  );
};

export default AppNavigator;